<template>
	<view class="work-container">
	<uni-group class="group" mode="card" v-for="(item, index) in typeList" :index="index" :key="index">
		<view class="code">
			<uni-icons class="iconLeft" type="wallet" size="30" color="#000000"></uni-icons>
			<uni-icons class="iconRight" type="right" size="15" color="#000000"
				@click="toMaterialTypeDetials(item.materiaFeedTypeId)"></uni-icons>
		</view>
		<hr />
		<view class="message">
			<view> 饲料类型：{{item.materiaFeedType}}</view>
			<view> 备注：{{item.remark}}</view>
		</view>
	</uni-group>
	<!-- 加载更多 -->
	<uni-load-more iconType="auto" :status="status" />
	<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" @fabClick="toMaterialTypeAdd" />
	</view>
</template>

<script>
	import {
		listType,
		addType,
		getType,
		updateType,
		delType
	} from "@/api/hmy/material";

	export default {
		name: "MaterialTpye",
		data() {
			return {
				// 进货表格数据
				typeList: [],
				//增加的加号
				horizontal: 'right',
				vertical: 'bottom',
				pattern: {
					buttonColor: '#55aa7f',
				},
				//加载更多
				status: 'more',
				total: '',

				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					type: undefined,

				}
			};
		},
		created() {
			this.getList();
		},
		//上拉加载
		onReachBottom() {
			this.queryParams.pageSize += 5;
			this.getList();
			if (this.typeList.length >= this.total) {
				this.status = 'noMore';
			} else {
				this.status = 'loading';
			}
		},
		methods: {

			/** 查询饲料类型列表 */
			getList() {
				//显示加载框
				uni.showLoading({
					title: '加载中'
				});
				listType(this.queryParams).then(response => {
					//console.log(response)
					this.typeList = response.rows;
					this.total = response.total;
					//隐藏加载框
					uni.hideLoading();
				});
			},

			//新增进货加号
			toMaterialTypeAdd() {
				this.$tab.navigateTo('/pages/hmy/material/materialTypeAdd');
			},



			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},

			//详情
			toMaterialTypeDetials(e) {
				console.log("xiangqing", e)
				this.$tab.navigateTo('/pages/hmy/material/materialTypeDetials?materiaFeedTypeId=' + e);
				
			}




		}
	};
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: 100%;
		height: auto;
		background-color: #fcfcfc;
	}
	
	view {
		font-size: 16px;
		line-height: inherit;
	}
	
	/* #endif */
	
	.colStyle{
		margin: 0 6px;
	}
	.group{
		position: relative;
		top: -10px;
	}
	
	
	
	.code {
		margin-bottom: 5px;
	}
	
	.iconleft {
		float: left;
	}
	
	.iconRight {
		float: right;
		margin-right: 10px;
		margin-top: 5px;
	}
	
	.message {
		margin-top: 5px;
		color: #838383;
		line-height: 25px;
	}
	
	.queryForm {
		border: #fcfcfc solid 1px;
		width: 350px;
		margin-top: 8px;
		margin-left: 10px;
	}
</style>